<template>
	<view class="content">
		<div class="topBg">
			<div class="head">
				<span class="idText">ID: {{ userId }}</span>
				<div class="btnList">
					<div class="hbBox">
						<div class="imgAndBadge">
							<image @click="messageBtn" src="@/static/images/xiaoxi.png" alt="" />
							<u-badge :isDot="true" :show="isNotice" bgColor="#E0939B" max="99" :absolute="true"
								:offset="['0', '20rpx']" :value="badgeValue"></u-badge>
						</div>
						<image @click="shezhiBtn" src="@/static/images/shezhi.png" alt="" />
					</div>
				</div>
			</div>
			<div class="userBox">
				<div class="main">
					<!-- <image class="txImg" :src="avatarSrc ? avatarSrc : '/static/images/logo.png'"></image> -->
					<u-avatar :src="avatarSrc ? avatarSrc : '/static/images/logo.png'" size="200rpx"
						alt="avatar"></u-avatar>
					<span class="userNameBox">{{ userName ? userName : '-' }}</span>
					<div class="textNum">
						<div class="textNumBox">
							<span class="num">{{ inLikes }}</span>
							<span class="text">{{ $t('inlike') }}</span>
						</div>
						<div class="textNumBox" @click="hendleAttention">
							<span class="num">{{ attention }}</span>
							<span class="text">{{ $t('attention') }}</span>
						</div>
						<div class="textNumBox" @click="hendleFansNumber">
							<span class="num">{{ fansNumber }}</span>
							<span class="text">{{ $t('fans') }}</span>
						</div>
					</div>
				</div>
				<!-- <div class="right">
					<div class="right1"><span class="num">{{ fansNumber }}</span> <span> {{ $t('fans') }}</span></div>
					<div class="right2"><span class="num">{{ attention }}</span> <span> {{ $t('attention') }}</span></div>
				</div> -->
			</div>
			<!-- 扫码按钮 -->
			<!-- <div class="scanning">
				<image @click="scanningBtn" src="@/static/images/saoma.png" alt="" />
			</div> -->
		</div>

		<div class="footer">
			<div class="body">
				<div class="bodytopBg">
					<u-tabs :scrollable="false" lineWidth="150rpx" lineColor="#2F2425" :list="list1"
						itemStyle="padding-left: 1px; padding-right: 1px; height: 80rpx;" @click="tabsClick"></u-tabs>
					<div class="selectBox">
						<div class="select" v-if="tabsData !== $t('footprint') && tabsData !== $t('collection')">
							<up-select v-model:current="cateId1" :label="cateName1" :options="cateList1"
								@select="selectItem"></up-select>
						</div>
						<span v-else>&nbsp;</span>
					</div>
				</div>
				<div class="gradientBox">
					<image src="@/static/images/gradient.png"></image>
				</div>
			</div>
			<div class="window1" v-if="tabsData === $t('like')">
				<up-list @scrolltolower="getFashionplay(tabsData)">
					<view class="slide-up" v-if="gridList.length > 0">
						<u-grid :border="false" col="2">
							<u-grid-item v-for="(listItem, listIndex) in gridList" :key="listIndex"
								@click="gridItemClick(listItem)">
								<div class="gridItemBox" @click="toAdv(tabsData, listItem)">
									<div class="liteBox">
										<div class="imgBox">
											<image class="image" mode="aspectFill" :src="listItem.funplay_urls[0]"
												alt="" />
										</div>
										<span class="liteText">{{ listItem.funplay_title
										}}</span>
										<div class="liteFootle">
											<image class="fontImg" src="@/static/images/xin.png" alt="" />
											<span class="likeNum">{{ formatToWan(listItem.likes) }}</span>
											<span class="liteTitle">{{ listItem.user_name }}</span>
										</div>
									</div>
								</div>
							</u-grid-item>
						</u-grid>
						<div class="footerFoot">
							<span v-if="listLogin">{{ $t('collection') }}</span>
							<!-- <span v-else>{{ $t('noMore') }}</span> -->
						</div>
						<u-toast ref="uToast" />
					</view>
					<view v-else>
						<div class="noLike">
							<image src="@/static/images/logo.png" alt="" />
							<span>{{ $t('Thereisnomovement2') }}</span>
							<span class="goHome">{{ $t('Gotothehomepagemoreoften') }}</span>
						</div>
					</view>
				</up-list>
			</div>
			<!-- <div class="released" v-else-if="tabsData === $t('collection')">
				<div class="fiexBtn">
					<u-button text="新建收藏夹" @click="newFavorites"></u-button>
				</div>
				<view class="slide-up">
					<up-card :head-style="{ padding: '10rpx' }" :body-style="{ padding: '16rpx' }">
						<template #head>
							<span>收藏夹a</span>
							<span class="relesedGD" @click="handleMore">更多></span>
						</template>
<template #body>
							<view>
								<u-grid :border="false" col="3">
									<u-grid-item v-for="(listItem, listIndex) in gridList2" :key="listIndex"
										@click="gridItemClick(listItem)">
										<div class="gridItemBox2">
											<div class="liteBox">
												
										<div class="imgBox">
												<image class="image2" mode="aspectFill" src="@/static/logo.png" alt="" />
										</div>
												<span class="liteText">{{ listItem.text }}</span>
											</div>
										</div>
									</u-grid-item>
								</u-grid>
						<div class="footerFoot">
							<span v-if="listLogin">{{ $t('collection') }}</span>
							<span v-else>{{ $t('noMore') }}</span></div>
								<u-toast ref="uToast" />
							</view>
						</template>
</up-card>

<div class="scFootle"></div>
</view>
</div> -->
			<div class="likes" v-else-if="tabsData === $t('released')">
				<up-list @scrolltolower="getFashionplay(tabsData)">
					<view class="slide-up" v-if="gridList3.length > 0">
						<u-grid :border="false" col="2">
							<u-grid-item v-for="(listItem, listIndex) in gridList3" :key="listIndex"
								@click="gridItemClick(listItem)">
								<div class="gridItemBox" @click="toAdv(tabsData, listItem)">
									<div class="liteBox">
										<div class="imgBox">
											<image class="image" mode="aspectFill" :src="listItem.funplay_urls[0]"
												alt="" />
										</div>
										<span class="liteText">{{ listItem.funplay_title }}</span>
										<div class="liteFootle">
											<image class="fontImg" src="@/static/images/xin.png" alt="" />
											<span class="likeNum">{{ formatToWan(listItem.likes) }}</span>
											<span class="liteTitle">{{
												formatTimeAgo(listItem.add_time) }}</span>
										</div>
									</div>
								</div>
							</u-grid-item>
						</u-grid>
						<div class="footerFoot">
							<span v-if="listLogin">{{ $t('collection') }}</span>
							<!-- <span v-else>{{ $t('noMore') }}</span> -->
						</div>
						<u-toast ref="uToast" />
					</view>
					<view v-else>
						<div class="noLike">
							<image src="@/static/images/logo.png" alt="" />
							<span>{{ $t('Thereisnomovement2') }}</span>
							<span class="goHome">{{ $t('clicktheplussign') }}</span>
						</div>
					</view>
				</up-list>
			</div>
			<div class="collection" v-else-if="tabsData === $t('footprint')">
				<up-list @scrolltolower="getFashionplay(tabsData)">
					<view class="slide-up" v-if="gridList4.length > 0">
						<u-grid :border="false" col="2">
							<u-grid-item v-for="(listItem, listIndex) in gridList4" :key="listIndex"
								@click="gridItemClick(listItem)">
								<div class="gridItemBox" @click="toAdv(tabsData, listItem)">
									<div class="liteBox">
										<div class="imgBox">
											<image class="image" mode="aspectFill" :src="listItem.images_sign[0]"
												alt="" />
										</div>
										<span class="liteText">{{ listItem.funplay_title }}</span>
										<div class="liteFootle">
											<image class="fontImg" src="@/static/images/xin.png" alt="" />
											<span class="likeNum">{{ formatToWan(listItem.likes) }}</span>
											<span class="liteTitle">{{ listItem.user_name }}</span>
										</div>
									</div>
								</div>
							</u-grid-item>
						</u-grid>
						<div class="footerFoot">
							<span v-if="listLogin">{{ $t('collection') }}</span>
							<!-- <span v-else>{{ $t('noMore') }}</span> -->
						</div>
						<u-toast ref="uToast" />
					</view>
					<view v-else>
						<div class="noLike">
							<image src="@/static/images/logo.png" alt="" />
							<span>{{ $t('Thereisnomovement2') }}</span>
							<span class="goHome">{{ $t('Gotothehomepagemoreoften') }}</span>
						</div>
					</view>
				</up-list>
			</div>
		</div>
		<my-tabbar :tabbarData="3"></my-tabbar>
		<!-- <div style="width: 100%;height: 3.6rem;"></div> -->
	</view>
</template>
<script setup lang="ts">
import { getFull, updataAvatars, meLike, otherinfoMe, funplayList } from '@/api/meApi/me.js'
import myTabbar from '@/components/myTabbar.vue'
import { ref, onMounted, watch } from 'vue'
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { official } from '@/api/index/index'
import { formatToWan } from '@/utils/numericalToW'
import { useI18n } from 'vue-i18n'
import { formatTimeAgo } from "@/utils/timeUtils.js"
const { t } = useI18n()

// 数据定义
const userId = ref(uni.getStorageSync('dplID'))
const userCode = ref(uni.getStorageSync('userCode'))
const userName = ref(uni.getStorageSync('username'))
const avatarSrc = ref(uni.getStorageSync('avatarUrl'))
let inLikes = ref(0)
let fansNumber = ref(0)
let isNotice = ref(false)// 是否显示徽标
let attention = ref(0)
const badgeValue = ref(100)// 徽标数值
const list1 = ref([
	{ name: t('like') },
	// { name: t('collection') },
	{ name: t('released') },
	{ name: t('footprint') }
])
// 监听语言变化（假设你的国际化库有语言变化事件）
watch(() => t('like'), () => {
	list1.value = [
		{ name: t('like') },
		// { name: t('collection') },
		{ name: t('released') },
		{ name: t('footprint') }
	]
	tabsData.value = t('like')
})
const tabsData = ref(t('like'))
const gridList = ref([])
const gridList2 = ref([])
const gridList3 = ref([])
const gridList4 = ref([])
const show = ref(false)
const cateId1 = ref('1')
const cateName1 = ref(t('Fromnewtoold'))
const cateList1 = ref([
	{ id: '1', name: t('Fromnewtoold') },
	{ id: '0', name: t('fromoldtonew') }
])
watch(() => t('Fromnewtoold'), () => {
	cateList1.value = [
		{ id: '1', name: t('Fromnewtoold') },
		{ id: '2', name: t('fromoldtonew') }
	]
	cateName1.value = t('Fromnewtoold')
})
const listLogin = ref(false) // 上拉加载状态
const xhPage = ref(1)
const FbPage = ref(1)
// onPullDownRefresh(() => {// 下拉刷新
// 	// console.log('下拉刷新');
// 	if (tabsData.value == t('like')) {
// 		getXHData(0)
// 	} else if (tabsData.value == t('released')) {
// 		getFbData(0)
// 	} else if (tabsData.value == t('footprint')) {
// 		// 足迹逻辑
// 		listLogin.value = false
// 	}
// 	setTimeout(() => {
// 		uni.stopPullDownRefresh();// 关闭下来刷新动画效果
// 	}, 1000);
// })
// 上拉触底方法
const getFashionplay = (data: string) => {
	if (listLogin.value) return
	listLogin.value = true
	if (data == t('like')) {
		getXHData(1)
	} else if (data == t('released')) {
		getFbData(1)
	} else if (data == t('footprint')) {
		loadUserInfo()
		listLogin.value = false
	}
}
// 获取喜欢数据
const getXHData = (index: number) => {
	if (index == 0) {
		xhPage.value = 1
		gridList.value = []
	} else {
		xhPage.value++
	}
	let para = {
		current: xhPage.value,
		order: cateId1.value,
	}
	meLike(para).then((res: object) => {
		if (res.code == 200) {
			if (!res.data) return xhPage.value--
			gridList.value.push(...res.data)
		} else {
			uni.showToast({
				title: `${res.msg}`,
				icon: 'none',
				duration: 2000
			})
		}
	}).finally(() => {
		listLogin.value = false
	})
}
// 获取发布数据
const getFbData = (index: number) => {
	if (index == 0) {
		gridList3.value = []
		FbPage.value = 1
	} else {
		FbPage.value++
	}
	let para = {
		usercode: userCode.value,
		current: FbPage.value,
		order: cateId1.value,
	}
	// console.log(111, para);

	funplayList(para).then((res: object) => {
		if (res.code == 200) {
			if (!res.data) return FbPage.value--
			gridList3.value.push(...res.data)
		} else {
			uni.showToast({
				title: `${res.msg}`,
				icon: 'none',
				duration: 2000
			})
		}
	}).finally(() => {
		listLogin.value = false
	})
}
const selectItem = (item: object) => {// 排序选择
	if (item.name) {
		cateName1.value = item.name
		if (tabsData.value == t('released')) {
			getFbData(0)
		} else if (tabsData.value == t('like')) {
			getXHData(0)
		}
	}
}
// 监听 cateName1 的变化
// watch(cateName1, (newValue: string, oldValue: string) => {
// 	if (newValue !== oldValue) {
// 		gridList.value.reverse()
// 		gridList3.value.reverse()
// 	}
// }, { immediate: true })
const messageBtn = () => {
	uni.navigateTo({
		url: `/pages/messagePage/messagePage?data=${JSON.stringify(setTzD.value)}`
	})
}

const shezhiBtn = () => {
	uni.navigateTo({
		url: '/pages/setting/setting'
	})
}

const scanningBtn = () => { }

const tabsClick = (item) => {// 标签切换
	tabsData.value = item.name
	if (tabsData.value == t('like')) {
		getXHData(0)
	} else if (tabsData.value == t('released')) {
		getFbData(0)
	}
}

const gridItemClick = (item) => {// 宫格点击

}

const open = () => {
	// console.log('open')
}

const close = () => {
	show.value = false
	// console.log('close')
}
// 收藏-新建收藏夹
const newFavorites = () => { }
// 收藏-更多
const handleMore = () => {
	uni.navigateTo({
		url: '/pages/me/favoriteList'
	})
}

const toAdv = (text: string, listItem: object) => {
	if (text == t('released')) {
		uni.navigateTo({
			// url: `/pages/advertisements/advertisements?forget=${t('tabbarMine')}&data=${listItem.funplay_code}`
			url: `/pages/advertisements/articleDetails?forget=${t('tabbarMine')}&data=${listItem.funplay_code}`
		})
	} else if (text == t('footprint')) {
		uni.navigateTo({
			// url: `/pages/advertisements/advertisements?forget=${t('tabbarMine')}&data=${listItem.funplay_code}`
			url: `/pages/advertisements/articleDetails?forget=${4}&data=${listItem.funplay_code}`
		})
	} else {
		uni.navigateTo({
			url: `/pages/advertisements/articleDetails?data=${listItem.funplay_code}`
		})
	}
}

const hendleAttention = () => {
	uni.navigateTo({
		url: `/pages/me/fanList?forget=${t('attention')}&num=0`
	})
}

const hendleFansNumber = () => {
	uni.navigateTo({
		url: `/pages/me/fanList?forget=${t('fans')}&num=1`
	})
}

const getUserData = () => {// 获取用户信息
	getFull().then((res: any) => {
		if (res.code == 200) {
			avatarSrc.value = res.data.avatarUrl
			uni.setStorageSync('avatarUrl', res.data.avatarUrl)
			userId.value = res.data.dplID
			uni.setStorageSync('dplID', res.data.dplID)
			userName.value = res.data.username
			uni.setStorageSync('username', res.data.username)
		} else {
			uni.showToast({
				title: `${res.msg}`,
				icon: 'none'
			})
		}
	})
}
const setTzD = ref({ comments: false, likes: false, follows: false, is_report: false, time: false })// 通知是否有点
const getotherinfoMe = () => {// 获取粉丝、关注数、用户信息等
	otherinfoMe().then((res: any) => {
		if (res.code == 200) {
			// if (res.data.avatar_url) {
			// 	avatarSrc.value = res.data.avatar_url
			// 	uni.setStorageSync('avatarUrl', res.data.avatar_url)
			// }
			// if (res.data.dpl_id) {
			// 	userId.value = res.data.dpl_id
			// 	uni.setStorageSync('dplID', res.data.dpl_id)
			// }
			// if (res.data.user_name) {
			// 	userName.value = res.data.user_name
			// 	uni.setStorageSync('username', res.data.user_name)
			// }
			inLikes.value = res.data.likes
			attention.value = res.data.follows
			fansNumber.value = res.data.fans
			// #ifndef H5
			let newDate = res.data.latest_official_time
			let oldDate = plus.storage.getItem('latestofficialtime' + res.data.dpl_id)
			if (newDate && oldDate) {
				if (newDate > oldDate) {
					setTzD.value.time = true
					plus.storage.setItem('latestofficialtime' + res.data.dpl_id, res.data.latest_official_time)
				} else {
					setTzD.value.time = false
				}
			}
			// #endif
			if (res.data.is_comment || res.data.is_likes || res.data.is_follow || res.data.is_report) {// 判断是否有通知
				isNotice.value = true
			} else {
				isNotice.value = false
			}
			setTzD.value.comments = res.data.is_comment
			setTzD.value.likes = res.data.is_likes
			setTzD.value.follows = res.data.is_follow
			setTzD.value.is_report = res.data.is_report
			// setTzD.value.time = res.data.is_report
		} else {
			uni.showToast({
				title: `${res.msg}`,
				icon: 'none'
			})
		}
	})
}
// 获取足迹数据
const loadUserInfo = () => {
	try {
		const optionsData = plus.storage.getItem('optionsData' + userId.value)
		if (optionsData) {
			let zjData = JSON.parse(optionsData)
			// console.log("获取足迹:", zjData)
			gridList4.value = zjData
		}
	} catch (e) {
		console.error('读取失败:', e)
	}
}
const getofficial = () => {// 获取官方通告
	const getGFTGDate = new Date(plus.storage.getItem('GFTGDate' + userId.value))
	official().then((res: object) => {
		if (res.code == 200) {
			let date = new Date(res.data[0].create_time)
			if (getGFTGDate < date) {
				plus.storage.setItem('GFTGDate' + userId.value, date)
			} else {

			}
		} else {
			uni.showToast({
				title: `错误!${res.msg}`,
				icon: 'none',
				duration: 2000
			})
		}
	})
}
onShow(() => {
	if (tabsData.value == t('like')) {// 根据标签加载数据
		getXHData(0)
	} else if (tabsData.value == t('released')) {
		getFbData(0)
	}
	getotherinfoMe()
	// getofficial() // 获取官方通告数据(获取最新时间)
	getUserData()
	// #ifndef H5
	loadUserInfo()
	// #endif
})
// 生命周期钩子
onMounted(() => {
	if (uni.getStorageSync('token')) getotherinfoMe()
})

onLoad(() => {
	// #ifndef MP-WEIXIN
	uni.hideTabBar({
		animation: false
	})
	// #endif
	uni.hideTabBar()
})
</script>
<style lang='scss' scoped>
.content {
	width: 100%;
	height: 100vh;
	background-image: url('https://t.tutu.to/img/Ikjak');
	background-size: cover;
	/* 背景图片按比例缩放以覆盖整个容器 */
	background-position: center;
	/* 背景图片居中显示 */
	background-repeat: no-repeat;
	/* 背景图片不重复 */
	overflow-y: auto;
	// padding-top: var(--status-bar-height);

	.topBg {
		height: 30.5%;
		background: linear-gradient(135deg,
				#e1e4e9 0%,
				#ffeee7 15%,
				/* 从 5% 开始 */
				#ffeee7 85%,
				/* 到 95% 结束 */
				#e1e4e9 100%);
	}

	.head {
		width: 100%;
		height: 2rem;
		position: relative;

		.idText {
			color: #403F3F;
			font-size: 28rpx;
			line-height: 80rpx;
			margin-left: 48rpx;
			position: absolute;
			top: 2rem;
		}

		.btnList {
			// margin-top: 12rpx;
			margin-right: 20rpx;
			position: absolute;
			top: 2.4rem;
			right: 10rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			image:nth-child(1) {
				margin-right: 26rpx;
			}

			.hbBox {
				width: 100%;
				height: 100%;

				.imgAndBadge {
					position: relative;
					display: inline-block;
				}
			}
		}
	}

	.userBox {
		width: 100%;
		// height: 300rpx;
		height: calc(100% - 2rem);
		display: flex;
		justify-content: center;

		.left {
			width: 35%;
			height: 100%;
			display: inline-block;

			.left1,
			.left2,
			.left3 {
				margin-top: 15%;
				margin-left: 16%;
				display: flex;
				align-items: center;
			}

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
			}
		}

		.main {
			width: 82%;
			height: calc(100% - 2rem);
			text-align: center;
			margin-top: 2rem;
			// display: inline-block;
			// display: flex;
			// justify-content: center;

			.txImg {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}

			.userNameBox {
				font-size: 1rem;
			}

			::v-deep .u-avatar {
				margin: 0rpx auto 10rpx auto;
			}

			span {
				width: 100%;
				display: inline-block;
				font-weight: 600;
				// 一行显示，溢出隐藏
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.textNum {
			width: 100%;
			padding-top: 8rpx;

			.text {
				color: #6C6C6C;
				font-size: 24rpx;
				font-weight: normal;
			}

			.textNumBox {
				width: 30%;
				display: inline-block;

				.num {
					font-size: 1.15rem;
				}

				.text {
					font-size: .85rem;
					color: #6C6C6C;
				}
			}
		}

		.right {
			width: 35%;
			display: inline-block;
			height: 100%;

			.right1,
			.right2 {
				margin-top: 16%;
				margin-right: 16%;
				text-align: right;
			}

			span {
				color: #403c3b;
				margin-left: 0.5em;
			}

			.num {
				font-weight: bold;
			}
		}
	}

	.scanning {
		width: 100%;
		// height: 50rpx;
		height: 13%;
		text-align: right;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}


	.footer {
		width: 100%;
		height: calc(69.5% - 3.1875rem);
		// height: calc(62%);

		.body {
			width: 100%;
			height: 2.5rem;
			background: linear-gradient(90deg, #FFEEE7, #e1e4e9);

			// height: 88rpx;
			// height: 6%;
			.bodytopBg {
				background-color: #EAB3B8;
				border-radius: 15px 15px 0 0;
			}

			.gradientBox {
				width: 100%;
				height: 2rem;
				// background: linear-gradient(180deg, #EAB3B8, rgba(234, 179, 184, 0.1));

				image {
					width: 100%;
					height: 100%;
				}
			}

			::v-deep .u-tabs {
				width: 56%;
				height: 100%;
				// background: linear-gradient(90deg, #FFEEE7, #e1e4e9);
				display: inline-block;
			}

			::v-deep .u-tabs__wrapper {
				background-color: #EAB3B8;
				border-radius: 15px 15px 0 0;
			}

			.selectBox {
				// width: 100%;
				margin-top: 10rpx;
				height: 1.5rem;
				text-align: right;
				display: inline-block;
				float: right;

				.select {
					// width: 85%;
					margin-right: 10rpx;
					padding: 10rpx 20rpx;
					display: inline-block;
					background-color: #fff;
					border-radius: 15rpx;
					border: 1rpx solid #BBBBBB;

					::v-deep .u-select__text {
						font-size: 0.88rem;
					}
				}
			}
		}

		.window1,
		.likes,
		.released,
		.collection {
			width: 100%;
			height: calc(100% - 3.5rem);
			overflow-y: auto;
			margin-top: 1rem;

			::v-deep .u-list {
				width: 100%;
				height: 100% !important;
			}

			.slide-up {
				animation: slideUp 0.5s ease-out;

				.footerFoot {
					height: 1.5rem;
					font-size: 0.88rem;
					display: flex;
					justify-content: center;
					// align-items: center;
					color: #6b6b6b;
				}
			}

			.noLike {
				width: 80%;
				margin: 0 auto;
				padding-top: 100rpx;
				text-align: center;
				display: flex;
				flex-direction: column;

				image {
					width: 200rpx;
					height: 200rpx;
					margin: 0 auto;
				}

				span {
					font-size: 28rpx;
					font-weight: 700;
					display: inline-block;
				}

				.goHome {
					color: #6C6C6C;
					margin-top: 20rpx;
					font-size: 28rpx;
					font-weight: normal;
				}
			}

			@keyframes slideUp {
				from {
					transform: translateY(100%);
					opacity: 0;
				}

				to {
					transform: translateY(0);
					opacity: 1;
				}
			}
		}

		.released {
			position: relative;

			.relesedGD {
				font-size: 24rpx;
				color: #3F3F40;
				float: right;
			}

			.fiexBtn {
				width: 160rpx;
				// 固定定位在底部并居中显示
				position: fixed;
				bottom: 120rpx;
				left: calc(50% - 80rpx);
				z-index: 999;

				.u-button {
					border-radius: 15px;
					border: 2px solid #de868f;
				}
			}

			.scFootle {
				width: 100%;
				height: 100rpx;
			}
		}

		.gridItemBox {
			width: 92%;
			height: 14.8rem;
			margin: 10rpx auto 10rpx;
			background-color: #fff;
			border-radius: 10px;
			position: relative;

			.liteBox {
				width: 86%;
				margin: 20rpx auto;

				.liteText {
					width: 100%;
					// height: 2.1rem;
					margin-top: .65rem;
					font-size: .85rem;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					line-clamp: 2;
				}

				.imgBox {
					width: 300rpx;
					height: 300rpx;
					// position: relative;
					overflow: hidden;
					border-radius: 25rpx;

					.image {
						width: 100%;
						height: 100%;
					}
				}

				.liteFootle {
					width: 86%;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					// justify-content: space-between;
					position: absolute;
					bottom: 6rpx;

					.likeNum {
						font-size: 0.75rem;
					}

					.fontImg {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					.liteTitle {
						width: 50%;
						height: 1rem;
						// font-size: 0.75rem;
						font-size: 24rpx;
						color: #666;
						text-align: right;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-left: auto;
						word-break: break-all;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						line-clamp: 1;
					}
				}
			}
		}

		.gridItemBox2 {
			width: 92%;
			margin: 10rpx auto;
			background-color: #fff;
			border-radius: 10px;

			.liteBox {
				width: 86%;
				margin: 0 auto;

				// .liteText {
				// 	width: 100%;
				// 	// height: 2.1rem;
				// 	font-size: 0.75rem;
				// 	display: inline-block;
				// 	overflow: hidden;
				// 	word-break: break-all;
				// 	text-overflow: ellipsis;
				// 	display: -webkit-box;
				// 	-webkit-box-orient: vertical;
				// 	-webkit-line-clamp: 2;
				// 	line-clamp: 2;
				// }

				.image2 {
					width: 180rpx;
					height: 140rpx;
				}

				.liteFootle {
					width: 100%;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.fontImg {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					.liteTitle {
						font-weight: bold;
						margin-left: auto;
					}
				}
			}
		}
	}

	.botText {
		width: 100%;
		height: 200rpx;

		::v-deep .u-button {
			margin: 0 auto;
			margin-top: 40rpx;
			width: 90%;
			font-weight: 500;
			color: #fff;
			background-color: #de868f;
		}
	}
}
</style>